<template>
  <Modal :value="getShowHalloweenModal" title="万圣节" width="970" height="580" @on-ok="onCancel" @on-cancel="onCancel">
    <div class="img_h_style">
      <div class="img_v_style">
        <canvas width="180" height="90"/>
        <img v-bind:src="img1" width="180" height="180"/>
        <img v-bind:src="img2" width="180" height="180"/>
        <img v-bind:src="img3" width="180" height="180"/>
        <canvas width="180" height="90" />
      </div>
      <div class="img_v_style">
          <img v-bind:src="img4" width="180" height="180" v-show="true"/>
          <img v-bind:src="img5" width="180" height="180" v-show="true"/>
          <img v-bind:src="img6" width="180" height="180" v-show="true"/>
          <img v-bind:src="img7" width="180" height="180" v-show="true"/>
          <img v-bind:src="img4" width="180" height="180" v-show="false"/>
      </div>
      <div  class="img_v_style">
          <img v-bind:src="img8" width="180" height="180" v-show="true"/>
          <img v-bind:src="img9" width="180" height="180" v-show="true"/>
          <img v-bind:src="img10" width="180" height="180" v-show="true"/>
          <img v-bind:src="img11" width="180" height="180" v-show="true"/>
          <img v-bind:src="img8" width="180" height="580" v-show="false"/>
      </div>
      <div  class="img_v_style">
          <img v-bind:src="img12" width="180" height="180" v-show="true"/>
          <img v-bind:src="img13" width="180" height="180" v-show="true"/>
          <img v-bind:src="img14" width="180" height="180" v-show="true"/>
          <img v-bind:src="img15" width="180" height="180" v-show="true"/>
          <img v-bind:src="img12" width="180" height="180" v-show="false"/>
      </div>
      <div class="img_v_style">
          <canvas width="180" height="90"/>
          <img v-bind:src="img13" width="180" height="180"/>
          <img v-bind:src="img14" width="180" height="180"/>
          <img v-bind:src="img15" width="180" height="180"/>
          <canvas width="180" height="90" />
      </div>
    </div>
    <diV slot="footer">
      <Button type="primary" @click="lastPage()" v-bind:disabled="lastFlag">上一页</Button>
      <Button type="primary" @click="nextPage()" v-bind:disabled="nextFlag">下一页</Button>
    </diV>
  </Modal>
</template>

<script>
import gamezone from '@/assets/game/slot_halloween/gamezone.png'
import img2001 from '@/assets/game/slot_halloween/img2001.png'
import img2002 from '@/assets/game/slot_halloween/img2002.png'
import img2003 from '@/assets/game/slot_halloween/img2003.png'
import img2004 from '@/assets/game/slot_halloween/img2004.png'
import img2005 from '@/assets/game/slot_halloween/img2005.png'
import img2006 from '@/assets/game/slot_halloween/img2006.png'
import img2007 from '@/assets/game/slot_halloween/img2007.png'
import img2008 from '@/assets/game/slot_halloween/img2008.png'
import img2009 from '@/assets/game/slot_halloween/img2009.png'
import img2010 from '@/assets/game/slot_halloween/img2010.png'
import img2011 from '@/assets/game/slot_halloween/img2011.png'
import img2012 from '@/assets/game/slot_halloween/img2012.png'
import img2013 from '@/assets/game/slot_halloween/img2013.png'
import img2014 from '@/assets/game/slot_halloween/img2014.png'
import img2015 from '@/assets/game/slot_halloween/img2015.png'
export default {
  props: ['recordData', 'showHModal'],
  data () {
    return {
      curPage: 1,
      imgMap: {},
      curIndex: 0,
      lastFlag: false,
      nextFlag: false,
      img2001,
      img2002,
      img2003,
      img2004,
      img2005,
      img2006,
      img2007,
      img2008,
      img2009,
      img2010,
      img2011,
      img2012,
      img2013,
      img2014,
      img2015,
      gamezone,
      img1: '',
      img2: '',
      img3: '',
      img4: '',
      img5: '',
      img6: '',
      img7: '',
      img8: '',
      img9: '',
      img10: '',
      img11: '',
      img12: '',
      img13: '',
      img14: '',
      img15: '',
      img16: '',
      img17: '',
      img18: '',
      img19: '',
      img20: '',
      img21: ''
    }
  },
  created () {
    this.imgMap['2001'] = img2001
    this.imgMap['2002'] = img2002
    this.imgMap['2003'] = img2003
    this.imgMap['2004'] = img2004
    this.imgMap['2005'] = img2005
    this.imgMap['2006'] = img2006
    this.imgMap['2007'] = img2007
    this.imgMap['2008'] = img2008
    this.imgMap['2009'] = img2009
    this.imgMap['2010'] = img2010
    this.imgMap['2011'] = img2011
    this.imgMap['2012'] = img2012
    this.imgMap['2013'] = img2013
    this.imgMap['2014'] = img2014
    this.imgMap['2015'] = img2015
    console.log('this.imgMap:' + this.imgMap)
  },
  methods: {
    lastPage () {
      console.log('lastPage')
      if (this.curPage > 0) {
        this.curPage = this.curPage - 1
        this.onShowData(this.curPage)
      } else {
        this.$Message.info('已经是第一页!')
      }
    },
    nextPage () {
      console.log('nextPage', this.curPage, ' ,this.recordData.length:', this.recordData.length)
      if (this.curPage < this.recordData.length - 1) {
        this.curPage = this.curPage + 1
        this.onShowData(this.curPage)
      } else {
        this.$Message.info('已经是最后一页!')
      }
    },
    onCancel () {
      // this.curPage = 0
      console.log('onCancel')
      this.$emit('closeHalloweenModel')
    },
    onShowData (index) {
      if (index > this.recordData.length - 1) {
        this.$Message.error('超出数据范围!')
      }
      let _data = this.recordData[index].split(',')
      let _item = _data[0].split('-')
      console.log('_item:', _item[0])
      this.img1 = this.imgMap[_item[0]]
      _item = _data[1].split('-')
      this.img2 = this.imgMap[_item[0]]
      _item = _data[2].split('-')
      this.img3 = this.imgMap[_item[0]]
      _item = _data[4].split('-')
      this.img4 = this.imgMap[_item[0]]
      _item = _data[5].split('-')
      this.img5 = this.imgMap[_item[0]]
      _item = _data[6].split('-')
      this.img6 = this.imgMap[_item[0]]
      _item = _data[7].split('-')
      this.img7 = this.imgMap[_item[0]]
      _item = _data[8].split('-')
      this.img8 = this.imgMap[_item[0]]
      _item = _data[9].split('-')
      this.img9 = this.imgMap[_item[0]]
      _item = _data[10].split('-')
      this.img10 = this.imgMap[_item[0]]
      _item = _data[11].split('-')
      this.img11 = this.imgMap[_item[0]]
      _item = _data[12].split('-')
      this.img12 = this.imgMap[_item[0]]
      _item = _data[13].split('-')
      this.img13 = this.imgMap[_item[0]]
      _item = _data[14].split('-')
      this.img14 = this.imgMap[_item[0]]
      _item = _data[15].split('-')
      this.img15 = this.imgMap[_item[0]]
      this.curIndex = index

      console.log('this.curIndex:', this.curIndex, ' ,this.recordData.length:', this.recordData.length)
      if (this.curIndex === this.recordData.length - 1) {
        this.nextFlag = true
      } else {
        this.nextFlag = false
      }

      if (this.curIndex === 0) {
        this.lastFlag = true
      } else {
        this.lastFlag = false
      }
    }
  },
  computed: {
    getShowHalloweenModal () {
      console.log('getShowHalloweenModal')
      // let curData = this.recordData[0]
      if (this.recordData.length > 0) {
        console.log(this.recordData[0])
        this.onShowData(this.curIndex)
      }
      return this.showHModal
    },
    setShowHalloweenModal () {
      console.log('setShowHalloweenModal')
    }
  }
}
</script>

<style>
.img_v_style {
  	/*flex布局（作用于容器）*/
  width:200px;
  height:580px;
	display:flex;
  flex-direction:column;
}
.img_h_style {
  	/*flex布局（作用于容器）*/
  width:950px;
  height:580px;
	display:flex;
  flex-direction:row;
}

</style>
